<template>
  <div class="container row">
    <el-card v-for="(item, index) in groupList" :key="index" class="box-card">
      <div slot="header" class="clearfix row between">
        <div>
          <el-tag v-if="item.state == 2" size="mini" type="warning"
            >审核中</el-tag
          >
          <el-tag v-if="item.state == 3" size="mini" type="success"
            >审核通过</el-tag
          >
          <span class="font18 bold header">{{ item.groupName }}</span>
        </div>
        <div class="row">
          <el-button
            v-if="item.state == 1"
            @click="deleteGroup(item.groupId)"
            style="float: right; padding: 3px 0; color: red"
            type="text"
            >删除</el-button
          >
          <el-button
            v-if="item.state == 1"
            @click="editGroup(item)"
            style="float: right; padding: 3px 0"
            type="text"
            >编辑</el-button
          >
          <el-button
            v-if="item.state == 1 && !(item.src == null && item.src == '')"
            type="warning"
            @click="examine(item)"
            >审核</el-button
          >
        </div>
      </div>
      <div class="font14 item">竞赛名称：{{ item.compName }}</div>
      <div class="font14 item">
        比赛时间：{{ item.dateTime | filterTime1 }} -
        {{ item.dateTime | filterTime2 }}
      </div>
      <div class="font14 item">
        创建人：{{ item.teacherName }}
        <span style="color: green; cursor: pointer">老师</span>
      </div>
      <div class="font14 item">
        队伍成员：<el-tag
          style="margin-right: 5px; margin-top: 5px"
          v-for="number in item.registrations"
          :key="number.regId"
          type="info"
          >{{ number.userName }}</el-tag
        >
      </div>
      <div v-if="!(item.src == '' || item.src == null)" class="font14 item">
        <div>商业计划书：</div>
        <div>
          <el-upload
            action=""
            :on-preview="handlePreview"
            :file-list="item.src | srcFilter"
          >
          </el-upload>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "group",
  props: {
    groupList: {
      type: Array,
      required: false,
      default() {
        return [];
      },
    },
  },
  filters: {
    filterTime1(list) {
      return list.split(",")[0];
    },
    filterTime2(list) {
      return list.split(",")[1];
    },
    srcFilter(src) {
      var fileList = [];
      fileList.push({
        name: src.split("/")[src.split("/").length - 1],
        url: src,
      });
      return fileList;
    },
  },
  methods: {
    deleteGroup(id) {
      this.$emit("deleteGroup", id);
    },
    editGroup(data) {
      this.$emit("editGroup", data);
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      console.log(file);
      this.$confirm("此操作将下载该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          window.open(file.url, "_blank");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消下载",
          });
        });
    },
    // 审核
    examine(item) {
      this.$emit("examine", item);
    },
  },
};
</script>

<style scoped>
.container {
  margin: 25px 0;
  flex-wrap: wrap;
}
/* 卡片 */
.item {
  margin-bottom: 18px;
}
.clearfix .header {
  width: 100px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 300px;
  margin: 0 20px 20px 0;
}
</style>